<template>
    <div style="padding: 0 40px;">
        <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">
                <el-upload class="avatar-uploader" action="/api/online-test/v1.0/file/upload" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="userInfo.userAvatar" :src="userInfo.userAvatar" class="dialog-avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div style="margin: 10px 0;">
                    <el-input v-model="userInfo.userName" style="width: 200px;" placeholder="用户名"></el-input>
                </div>
                <div style="margin: 10px 0;">
                    <el-input v-model="userInfo.userEmail" style="width: 200px;" placeholder="邮箱"></el-input>
                </div>
                <div>
                    <span class="operation-btn" @click="updateInfo">立即修改</span>
                </div>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">
                <div style="margin: 10px 0;">
                    <el-input v-model="pwdEntity.oldPwd" show-password style="width: 200px;"
                        placeholder="原始密码"></el-input>
                </div>
                <div style="margin: 10px 0;">
                    <el-input v-model="pwdEntity.newPwd" show-password style="width: 200px;"
                        placeholder="新密码"></el-input>
                </div>
                <div style="margin: 10px 0;">
                    <el-input v-model="pwdEntity.againPwd" show-password style="width: 200px;"
                        placeholder="重复密码"></el-input>
                </div>
                <div>
                    <span class="operation-btn" @click="updateUserPwd">立即修改</span>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo: {},
            activeName: 'first',
            pwdEntity: {}
        }
    },
    created() {
        this.tokenCheckLoad();
    },
    methods: {
        updateUserPwd() {
            if (this.pwdEntity.oldPwd === undefined || this.pwdEntity.newPwd === undefined || this.pwdEntity.againPwd === undefined) {
                this.$swal.fire({
                    title: '密码修改',
                    text: '请完善信息',
                    icon: 'info',
                    showConfirmButton: false,
                    timer: 1000,
                });
            }
            this.pwdEntity.oldPwd = this.$md5(this.$md5(this.pwdEntity.oldPwd));
            this.pwdEntity.newPwd = this.$md5(this.$md5(this.pwdEntity.oldPwd));
            this.pwdEntity.againPwd = this.$md5(this.$md5(this.pwdEntity.oldPwd));
            this.$axios.put('user/updatePwd', this.pwdEntity).then(response => {
                this.pwdEntity = {};
                const { data } = response;
                if (data.code === 200) {
                    this.$swal.fire({
                        title: '密码修改',
                        text: '修改成功',
                        icon: 'success',
                        showConfirmButton: false,
                        timer: 1000,
                    });
                    this.tokenCheckLoad();
                } else {
                    this.$swal.fire({
                        title: '密码修改',
                        text: data.msg,
                        icon: 'info',
                        showConfirmButton: false,
                        timer: 1000,
                    });
                }
            })
        },
        updateInfo() {
            this.$axios.put('user/update', this.userInfo).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.$swal.fire({
                        title: '修改信息',
                        text: '修改成功',
                        icon: 'success',
                        showConfirmButton: false,
                        timer: 1000,
                    });
                }
                sessionStorage.setItem('userInfo',JSON.stringify(this.userInfo));
            })
        },
        handleAvatarSuccess(res, file) {
            if (res.code !== 200) {
                this.$message.error(`用户头像上传异常`);
                return;
            }
            this.$message.success(`用户头像上传成功`);
            this.userInfo.userAvatar = res.data;
        },
        updateUserInfo() {
            this.operation = 'updateUserInfo';
        },
        updatePwd() {
            this.operation = 'updatePwd';
        },
        tokenCheckLoad() {
            this.$axios.get('user/auth').then(response => {
                const { data } = response;
                if (data.code === 400) {
                    this.$message.error(res.data.msg);
                    this.$router.push('/login');
                    return;
                }
                this.userInfo = data.data;
            })
        },
    }
};
</script>

<style scoped lang="scss">
.operation-btn {
    text-align: center;
    background-color: rgb(235, 237, 245);
    color: rgb(43, 121, 203);
    display: inline-block;
    border: none;
    line-height: 35px;
    font-size: 12px;
    box-sizing: border-box;
    width: 200px;
    border-radius: 5px;
    cursor: pointer;
}

img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.fun {
    margin-right: 10px;
    background-color: rgb(255 255 255);
    border: 1px solid rgb(244, 245, 245);
    cursor: pointer;
    padding: 12px 8px;
    border-radius: 5px;
    font-size: 14px;

}

.fun:hover {
    border: 1px solid rgb(229, 229, 229);
}
</style>